<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
    <meta name="author" content="test">
    <meta name="description" content="test">
    <meta name="copyright" content="ltlwill">
    <meta name="viewport" content="width=device-width;height=device-height;initial-scale=1.0">
    <title>Navigation</title>
    <style>
        *,*::before,*::after{
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
            cursor: pointer;
        }
        body{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            /*background:transparent url("b7.jpg") repeat fixed center ;
            background-origin: border-box;
            background-clip: border-box;
            background-size: cover;*/
        }
        .container{
            width: 100%;
            height: auto;
           /* background:transparent url("b4.jpg") repeat scroll center ;
            background-origin: border-box;
            background-clip: border-box;
            background-size: cover;*/
        }
        .header{
            width: 100%;
            height: auto;
            /*background-color: #5f9ea0;*/
        }
        .content{
            width: 100%;
            height: 100%
            margin-left: 30px;
        }
        .nav_area{
            background: #5f9ea0;
            width: 950px;
            min-width: 950px;
            white-space: nowrap;
            height: 40px;
            min-height: 40px;
            margin: auto;
            padding: 0;
            top: 0px;
           /* filter: alpha(opacity=50);
            opacity: .5;*/
            position: relative;
        }
        .nav{
            list-style: none;
            margin: 0px 30px 0px 30px;
            padding: 0px;
            line-height: 40px;
        }
        .nav li{
            list-style: none;
            float: left;
            display: inline;
            margin: 0px auto 0px auto;
        }
        .nav li a{
            text-decoration: none;
            width: 100px;
            height: 40px;
            padding: 0px 15px;
            font-family: sans-serif;
            font-weight: bolder;
            font-size: 16px;
            display: inline-block;
            text-align: center;
        }
        .nav_item
        {
            color: #FFF;
        }

        .navHover{
            color: #5f9ea0 ;
            background: #FFF;
        }
        /*.nav li a:hover{*/
            /*color: #5f9ea0;*/
            /*background: #FFF;*/
        /*}*/
        /*
       /!* 鼠标覆盖时，显示子菜单*!/
        .nav li:hover>.nav_children {
            display: block;
        }*/

        .nav .nav_children{
            display: none;
            position: absolute;
            top: 40px;
            width: 100px;
            text-align: center;
            line-height: 20px !important;
            margin: 0;
            padding: 0;
            border-color: transparent #5f9ea0 #5f9ea0 ;
            border-width: 0px 2px 2px 2px;
            border-style:none solid solid;

        }
        .nav .nav_children li
        {
            width: 100% !important;
            max-width:100% !important;
            display: block;
            text-align: center;
            border-top: 1px solid #5f9ea0;
            margin: 0;
            padding: 0;
        }
        .nav .nav_children li a{
            width: 100% !important;
            height: 20px !important;
            line-height: 20px !important;
            display: block;
            text-align: center;
            color: #5f9ea0;
            font-size: 12px;
            font-weight: normal;
        }
        .nav .nav_children li a:hover{
            background-color: #f0f8ff;
        }

        .nav_left{
            /*min-height: 400px;*/
            width: 250px;
            max-width: 250px;
            overflow: hidden;
            border: solid 1px #5f9ea0;
            position: absolute;
        }
        .vtitle{
            height: 35px;
            min-height: 35px;
            line-height: 32px;
            background:#5f9ea0;
            cursor: pointer;
            border: none;
            padding-left: 20px;
            color: #FFF;

        }
        .vtitle_close{
            border-bottom: solid 1px #FFF;
        }
        .vicon{
            float: right;
            padding-right: 30px;
            overflow: hidden;
            background:transparent url("icon/vicon.png") no-repeat;
            display: inline-block;
            height: 15px;
            width: 15px;
            margin-top: 10px;
        }
        .vcontent
        {
            padding: 0;
            margin: 0;
            width: 100%;
        }
        .vlist{
            margin: 0;
            padding: 0;
            border: none;
        }
        .vicon_close{
            background-position: 0 0px;
        }
        .vicon_open{
            background-position: 0 -15px;
        }
        .vcontent li{
            width: 100%;
            list-style: none;
            display: inline-block;
            /*border-bottom: solid 1px #fdf5e6;*/
        }
        .vcontent li a{
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            display: inline-block;
            width: 100%;
            margin: 0;
            padding-left: 30px;
            position: relative;
        }
        .vcontent li a:hover{
            color: #FFF;
            background-color: #808000;
        }

        .vcontent>.vlist>li>a::before,.vcontent>.vlist>li>a::after{
            content: "";
            position: absolute;
            width: 10px;
            height: 2px;
            background: blueviolet;
            top: 50%;
            right: 15px;
            /*transform-origin: 10px 50% 0px;*/
            transform-origin:10px 50%;
        }
        .vcontent>.vlist>li>a::before{
            transform: rotate(45deg);
        }
        .vcontent>.vlist>li>a::after{
            transform: rotate(-45deg);
        }



    </style>

</head>
<body>
    <div class="container">
        <div class="header">
            <div class="nav_area">
                <ul class="nav">
                    <li>
                        <a class="nav_item" href="#">首页</a>
                    </li>
                    <li>
                        <a class="nav_item" href="#">日常用品</a>
                        <ul class="nav_children">
                            <li>
                                <a>食品</a>
                            </li>
                            <li>
                                <a>护肤用品</a>
                            </li>
                            <li>
                                <a>其他</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="nav_item" href="#">电子产品</a>
                        <ul class="nav_children">
                            <li>
                                <a>电脑手机</a>
                            </li>
                            <li>
                                <a>家用电器</a>
                            </li>
                            <li>
                                <a>U盘|移动硬盘</a>
                            </li>
                            <li>
                                <a>其他</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="nav_item" href="#">图书杂志</a>
                        <ul class="nav_children">
                            <li>
                                <a>时尚周刊</a>
                            </li>
                            <li>
                                <a>人文教育</a>
                            </li>
                            <li>
                                <a>科技读物</a>
                            </li>
                            <li>
                                <a>小说</a>
                            </li>
                            <li>
                                <a>其他</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="nav_item" href="#">今日特卖</a>
                        <ul class="nav_children">
                            <li>
                                <a>暂无信息</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="nav_item" href="#">联系我们</a>
                        <ul class="nav_children">
                            <li>
                                <a>微博</a>
                            </li>
                            <li>
                                <a>微信</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="nav_left">
                <div class="vtitle">
                    日常用品
                    <i class="vicon vicon_open"></i>
                </div>
                <div class="vcontent">
                    <ul class="vlist">
                        <li>
                            <a>食品</a>
                        </li>
                        <li>
                            <a>护肤品</a>
                        </li>
                        <li>
                            <a>其他</a>
                        </li>
                    </ul>
                </div>
                <div class="vtitle">
                    电子产品
                    <i class="vicon vicon_open"></i>
                </div>
                <div class="vcontent">
                    <ul class="vlist">
                        <li>
                            <a>电脑手机</a>
                        </li>
                        <li>
                            <a>家用电器</a>
                        </li>
                        <li>
                            <a>U盘|启动硬盘</a>
                        </li>
                        <li>
                            <a>其他</a>
                        </li>
                    </ul>
                </div>
                <div class="vtitle">
                    图书杂志
                    <i class="vicon vicon_open"></i>
                </div>
                <div class="vcontent">
                    <ul class="vlist">
                        <li>
                            <a>时尚周刊</a>
                        </li>
                        <li>
                            <a>人文教育</a>
                        </li>
                        <li>
                            <a>科技读物</a>
                        </li>
                        <li>
                            <a>小说</a>
                        </li>
                        <li>
                            <a>其他</a>
                        </li>
                    </ul>
                </div>
                <div class="vtitle">
                    今日特卖
                    <i class="vicon vicon_open"></i>
                </div>
                <div class="vcontent">
                    <ul class="vlist">
                        <li>
                            <a>暂无信息</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 顶部导航栏
            $(".nav > li").hover(
                function(){
//                    $(this).find(".nav_children").show();
                    $(this).find(".nav_children").slideDown("fast");
//                    $(this).find(".nav_children").fadeIn("fast");
                    $(this).children(".nav_item").addClass("navHover");
                },
                function(){
//                    $(this).find(".nav_children").hide();
                    $(this).find(".nav_children").slideUp("fast");
//                    $(this).find(".nav_children").fadeOut("fast");
                    $(this).children(".nav_item").removeClass("navHover");
            });
            // 左侧导航栏
            var currIndex;
            $(".vtitle").click(function(){
                var index = $(".vtitle").index($(this));
                var icon = $(".vicon",$(this));
                // 图标切换
                if(icon.hasClass("vicon_open"))
                {
                    icon.removeClass("vicon_open").addClass("vicon_close");
                    // 菜单伸缩
                    $(this).next(".vcontent").slideUp("fast");
                    (index==($(".vtitle").length - 1)) ? $(this).removeClass("vtitle_close") : $(this).addClass("vtitle_close");
                }else
                {
                    icon.removeClass("vicon_close").addClass("vicon_open");
                    // 菜单伸缩
                    $(this).next(".vcontent").slideDown("fast");
                    $(this).removeClass("vtitle_close");
                }
            });
        });
    </script>
</body>
</html>